<template>
  <div>

      <mh></mh>

    <main class="" id="main-collapse">
      <div>
      
      
        <!--面包屑导航 通过：进行传参操作-->
        <bread :datas='this.datas'></bread>

        <br /><br />
        <!-- 遍历数据 -->

        <table border="1" style="width: 100%">

          <tr>

            <td>订单号</td><td>课程价格</td><td>订单状态</td><td>课程明细</td><td>操作</td>
          </tr>

          <tr v-for="(item,index) in datalist">

            <td><a>{{ item.orderid }}</a></td>
            <td>

                {{ item.price }}

            </td>
            <td>
              {{ item.status | myfilter }}
            </td>

            <td>
              {{ item.status | coursedetail }}
            </td>

            <td>
              <!--判断支付状态-->
              <span v-if="ite.status== 0">
              <Button  color="red"  >支付</Button>
              </span>
              <span v-else>
                支付成功
              </span>
            </td>

          </tr>

        </table>

        
      </div>
    
    </main>

  </div>
</template>

 
<script>


import mh from './mh.vue'
//导入面包屑导航组件
import bread from './bread.vue'

export default {
  data () {
    return {
      msg: "这是一个变量",
      //面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'我的订单'}],
      //数据
      datalist:[]
      
    }
  },
  // 自定义过滤器
  filters:{
     
    // 定义方法名称
    myfilter:function(value){   
      // 判断逻辑 
      if (value == 1) {
        return '已支付';
      }else{
        return '待支付';
      }
    },
    // 格式化课程明细
    coursedetail:function(value){
      if (value != "") {
        // 将字符串转成dict
        var my_value = JSON.parse(value);

        var res = "";
        // 偏离
        for(var key in my_value){
          // 拼接字符串
          res += key + "的购买数量为" + my_value[key] + ",";

        }
        // 返回字符串
        return res;
      }else{
        return "";
      }
    }

  },
  components: {
        'mh':mh,
        //声明标签
        'bread':bread
  },
  mounted:function(){


    //初始化订单数据

    //使用箭头函数
    this.axios.get('http://localhost:8000/orderslist/',{params:{uid:localStorage.getItem("uid")}}).then((result) => {

            
        console.log(result);


        //赋值
        this.datalist = result.data;


        });

    

},
  methods:{

    

    
  }
}


</script>
 
<style>



</style>